<!-- 商品管理-商品列表 -->
<template>
    <div>
        <el-card style="max-width: 100%;" class="card-table">
            <search-box :tableDataInput="tableData" @search="handleSearch"></search-box>
            <el-button style="position: absolute;left: 550px;" v-if="deleteListButton" round
                @click="deleteList">批量删除</el-button>
            <span style="position: absolute;left: 670px;top: 112px;color: rgb(191, 202, 222);"
                v-if="deleteListButton">已选：{{deleteListLength}}</span>
            
            <el-button class="btn1" @click="showPop">发布新商品
                <div class="icon-container">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.6973876953125" height="13.3802490234375" viewBox="0 0 12.6973876953125 13.3802490234375" fill="none">
                        <path d="M11.3316 2.88538L9.99111 2.88538C9.41245 1.10326 8.02369 0 6.34845 0C4.67322 0 3.28495 1.10326 2.70583 2.88538L1.36581 2.88538C0.612609 2.88538 0 3.51019 0 4.27917L0 11.9877C0 12.7557 0.612594 13.3803 1.36581 13.3803L11.3316 13.3803C12.0547 13.3803 12.6415 12.8035 12.6883 12.0785C12.6902 12.0623 12.6974 12.0489 12.6974 12.0326L12.6974 11.9877L12.6974 11.6185L12.6974 4.27917C12.6974 3.51017 12.0848 2.88538 11.3316 2.88538ZM6.34845 1.00784C7.53158 1.00784 8.48564 1.68956 8.98827 2.88536L3.70914 2.88536C4.21175 1.68956 5.16534 1.00784 6.34845 1.00784ZM11.2661 12.4707L1.43134 12.4707C1.13531 12.4707 0.89525 12.2239 0.89525 11.9207L0.89525 4.34564C0.89525 4.04244 1.13531 3.79616 1.43134 3.79616L2.49397 3.79616C2.44566 4.1077 2.42173 4.41856 2.42173 4.72367C2.42173 4.96375 2.43752 5.20762 2.46908 5.46613C2.218 5.63014 2.06497 5.90967 2.06497 6.21478C2.06497 6.70688 2.45808 7.10763 2.94156 7.10763C3.42411 7.10763 3.81767 6.70688 3.81767 6.21478C3.81767 5.91184 3.66416 5.63063 3.41309 5.46613C3.37342 5.20406 3.35428 4.96063 3.35428 4.72367C3.35428 4.4133 3.38298 4.10173 3.43941 3.79616L9.25748 3.79616C9.31394 4.1003 9.34261 4.41186 9.34261 4.72367C9.34261 4.96422 9.32302 5.2105 9.28331 5.47497C9.03989 5.63995 8.89164 5.91852 8.89164 6.21478C8.89164 6.70688 9.2843 7.10763 9.76728 7.10763C10.2508 7.10763 10.6439 6.70688 10.6439 6.21478C10.6439 5.90394 10.487 5.6213 10.2292 5.4587C10.2598 5.2062 10.2747 4.9647 10.2747 4.72367C10.2747 4.41713 10.2508 4.10628 10.2034 3.79616L11.266 3.79616C11.5611 3.79616 11.8012 4.04244 11.8012 4.34564L11.8012 11.9227C11.8002 12.2249 11.5607 12.4707 11.2661 12.4707Z"   fill="#FF5733" ></path> 
                    </svg>
                </div>
            </el-button>

            <el-table :data="selectedItems" style="font-size: 16px;position: relative;top:-20px;"
                :header-cell-style="{ background: '#EBEEF2' }" @selection-change="checkBox">
                <el-table-column type="selection" align="center" width="60px" />
                <el-table-column prop="pic" label="商品图片" align="center" width="130px">
                    <template #default="scope">
                        <el-image style="width: 102px; height: 70px;border-radius: 10px;" :src="
                            scope.row.pic?scope.row.pic:''"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="commodityName" label="商品名称" :show-overflow-tooltip="true" align="center">
                </el-table-column>
                <el-table-column prop="productCategoryName" label="商品分类" align="center" sortable="custom"/>
                <el-table-column prop="brandName" label="商品品牌" align="center" />
                <el-table-column prop="productSn" label="货号" align="center" />
                <el-table-column prop="updateTime" label="更新日期" align="center" />
                <el-table-column label="操作" width="250%">
                    <template slot-scope="scope">
                        <div>
                            <span @click="edit(scope.$index,scope.row)">
                                <img src="../../assets/edit.svg" class="edit">
                                <span style="margin-left: 4px;">编辑</span>
                            </span>
                            <span @click="deleted(scope.$index,scope.row)">
                                <img src="../../assets/delete.svg" class="delete">
                                <span>删除</span>
                            </span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <AddCommodity :dialogVisible.sync="visible" @confirm="confirmFn" @submit-form="refreshPage"/>
        <el-pagination
            background
            layout="->,prev, pager,next,total"
            :page-size="10"
            :total="tableDataLength"
            @current-change="handleCurrentChange"
            style="margin-top: 20px;">
        </el-pagination>
    </div>
</template>


<script>
    import '@/styles/tableList.css';
    import AddCommodity from '@/views/commodity/components/AddCommodity.vue';
    import { getAllProducts,deleteProduct,getProductDetils } from '@/api/api.js'
    export default {
        components: {
            AddCommodity,
        },
        data() {
            return {
                visible: false,
                selectedItems: [],
                tableData: [],
                tableDataLength: 0,
                currentpageNumber: 0,
                deleteListButton: false,
                deleteListLength: 1,
                deleteL:[],
                commoditydetail:{ //请求数据
                    name:'',
                    pageNo:1,
                }
            }
        },
        async created() {
            await this.refreshPage();
        },
        methods: {
            getAllProductsList(data){
                setTimeout(()=>{
                    getAllProducts(data).then((res)=>{
                        this.selectedItems = res.data.result.records;
                        this.tableData = res.data.result.records;
                        this.tableDataLength = res.data.result.total;
                    }).catch((error)=>{
                        console.log(error)
                    })
                },1000)
            },
            
            async getProductDetils(id) {
                try {
                const response = await getProductDetils(id);
                console.log("获取商品数据",response.data);
                return response.data;
                } catch (error) {
                console.error('获取商品数据时出错：', error);
                }
            },
            async refreshPage() {
                await this.getAllProductsList(this.commoditydetail)
                this.currentpageNumber = 1
            },
            handleCurrentChange(val){
                this.commoditydetail.pageNo = val
                this.getAllProductsList(this.commoditydetail)
                this.currentpageNumber = val
            },
            showPop() {
                // this.visible = true;
                this.$router.push('/Main/AddCompodity')
            },
            confirmFn() {
                console.log(11);//为了以后扩展使用
            },
            handleSearch(name) {
                this.commoditydetail.name=name
                this.refreshPage()
            },
            deleted(index, row) {
                this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteProduct(row.id).then((res)=>{
                        if(res.data.code == 200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.selectedItems.splice(index, 1);
                            this.getAllProductsList(this.commoditydetail)
                        }
                    })
                }).catch(() => {    
                });
            },
            edit(index, row) {
                console.log(index)
                console.log(row)
                const detail = this.getProductDetils(row.id)
                console.log('获取商品详情',detail)
                this.$message({
                    message: '点击编辑',
                    type: 'warning'
                })
            },
            checkBox(selection) {
                if (selection.length >= 1) {
                    this.deleteListButton = true
                    this.deleteListLength = selection.length
                    this.deleteL = selection
                } else
                    this.deleteListButton = false
            },
            deleteList() {
                const ids = this.deleteL.map(item => item.id)
                this.$confirm('此操作将永久删除已选择的商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteProduct(ids.join(',')).then((res)=>{
                        if(res.data.code == 200){
                            this.$message({
                                type: 'success',
                                message: '批量删除成功!'
                            });
                            this.getAllProductsList(this.commoditydetail)
                        }
                    })
                }).catch(() => {        
                });
            }
        },
    };
</script>

<style scoped>
   
    .card-table .btn1 {
        padding-left: 40px;
        position: relative;
        float: right;
        top:-40px;
        opacity: 1;
        border-radius: 80px;
        width: 135px;
        height: 38px;
        color: white;
        font-size: 14px;
        background: rgba(126, 114, 242, 1);
    }

    .btn1 .icon-container {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background-color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn1 .icon-container svg {
        width: 12px;
        height: 12px;
        fill: #4CAF50;
    }



    .delete {
        width: 13.2px;
        height: 16px;
        position: relative;
        top: 3px;
        margin-left: 28px;
        margin-right: 3px;
    }

    .edit {
        width: 13.2px;
        height: 14px;
        position: relative;
        top: 2px;
    }


    
    /* 表格样式调整 */
    .custom-dialog {
        max-height: 100vh !important;
        /* 限制弹窗最大高度为视口高度的100% */
        overflow-y: hidden;
        /* 隐藏弹窗本身的滚动条 */
        left: 15%;
    }

    .dialog-content {
    max-height: calc(100vh - 250px);
    /* 减去对话框头部和可能的边框等高度根据实际情况调整 */
    overflow-y: auto;
    /* 内容超出时显示滚动条 */
    }


</style>